<template>
  <el-table :data="props.tableData" style="width: 100%" stripe>
    <el-table-column prop="shelf_id" label="ShelfID" />
    <el-table-column prop="type" label="总储位量" />
    <el-table-column prop="used_count" label="已使用量" />
    <el-table-column prop="light_count" label="亮灯数量" />
    <el-table-column prop="normal_count" label="正常存储" />
    <el-table-column prop="state" label="状态">
      <template #default="{ row }">
        <el-tag v-if="row.state === -1" type="danger" effect="dark" round>离线</el-tag>
        <el-tag v-if="row.state != -1" type="success" effect="dark" round>在线</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="" label="操作" width="450px">
      <template #default="scope">
        <el-button size="small" type="success" @click="turnOnShelfHandle(scope.$index, scope.row)"
          :disabled="scope.row.state !== -1">开机</el-button>
        <el-button size="small" type="info" @click="turnOffShelfHandle(scope.$index, scope.row)"
          :disabled="scope.row.state === -1">关机</el-button>
        <el-button size="small" type="primary" @click="takeOutAllLight(scope.$index, scope.row)">取出亮灯物料</el-button>
        <el-button size="small" type="warning" @click="clearStockConfirmHandel(scope.$index, scope.row)">清空本地库存</el-button>
        <el-button size="small" type="danger" @click="delShelfHandle(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { takeOutByLight } from '../api/api.js'
import { delShelf, turnOnShelf, turnOffShelf, clearStock } from '../api/api.js'
import { ElNotification, ElMessageBox, ElMessage, Action } from 'element-plus'

const props = defineProps(['tableData', 'getdata'])
const emit = defineEmits(['refreshShelf'])

const takeOutAllLight = (index: number, row) => {
  takeOutByLight({ shelf_id: row.shelf_id }).then(function (response: any) {

    var result = response.result
    var msg = response.msg

    if (result === 1) {
      ElNotification({
        title: 'Success',
        message: msg,
        type: 'success',
      });
    } else {
      ElNotification({
        title: 'Error',
        message: msg,
        type: 'error',
      })
    };
  })
    .catch(function (error) {
      ElNotification({
        title: 'Error',
        message: error,
        type: 'error',
      })
    })
    .finally(function () {
      // 总是会执行
    });

}

const delShelfHandle = (index: number, row) => {

  ElMessageBox.confirm(
    '该操作将会删除本地模拟料架,是否继续?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delShelf({ shelf_id: row.shelf_id }).then(function (response: any) {
        var result = response.result
        var msg = response.msg

        if (result === 1) {
          ElNotification({
            title: 'Success',
            message: msg,
            type: 'success',
          });
          emit("refreshShelf")
        } else {
          ElNotification({
            title: 'Error',
            message: msg,
            type: 'error',
          })
        };
      })
        .catch(function (error) {
          ElNotification({
            title: 'Error',
            message: error,
            type: 'error',
          })
        })
        .finally(function () {
          // 总是会执行
        });
    })
    .catch(() => {
    })
}

const turnOnShelfHandle = (index: number, row) => {
  turnOnShelf({ shelf_id: row.shelf_id }).then(function (response: any) {
    // console.log("开机:", response);
    var result = response.result
    var msg = response.msg
    if (result === 1) {
      ElNotification({
        title: 'Success',
        message: msg,
        type: 'success',
      });
      emit("refreshShelf")
    } else {
      ElNotification({
        title: 'Error',
        message: msg,
        type: 'error',
      })
    };
  })
    .catch(function (error) {
      ElNotification({
        title: 'Error',
        message: error,
        type: 'error',
      })
    })
    .finally(function () {
      // 总是会执行
    });
}

const turnOffShelfHandle = (index: number, row) => {
  turnOffShelf({ shelf_id: row.shelf_id }).then(function (response: any) {
    // console.log("关机:", response);
    var result = response.result
    var msg = response.msg
    if (result === 1) {
      ElNotification({
        title: 'Success',
        message: msg,
        type: 'success',
      });
      emit("refreshShelf")
    } else {
      ElNotification({
        title: 'Error',
        message: msg,
        type: 'error',
      })
    };
  })
    .catch(function (error) {
      ElNotification({
        title: 'Error',
        message: error,
        type: 'error',
      })
    })
    .finally(function () {
      // 总是会执行
    });
}

const clearStockConfirmHandel = (index: number, row) => {
  ElMessageBox.confirm(
    '该操作将会清空本地模拟料架数据,是否继续?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      clearStock({ shelf_id: row.shelf_id }).then(function (response: any) {

        var result = response.result
        var msg = response.msg

        if (result === 1) {
          ElNotification({
            title: 'Success',
            message: msg,
            type: 'success',
          });
          emit("refreshShelf")
        } else {
          ElNotification({
            title: 'Error',
            message: msg,
            type: 'error',
          })
        };
      })
        .catch(function (error) {
          ElNotification({
            title: 'Error',
            message: error,
            type: 'error',
          })
        })
        .finally(function () {
          // 总是会执行
        });
    })
    .catch(() => {
    })
}

</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
